<template>
  <div style="position: fixed">
    <div class="my-header">
      <div class="header-container">
        <div class="hl">
          <img src="../assets/img/phone.png" alt="" srcset="" />
          021-88888888
        </div>
        <div class="hr">
          <router-link to="/login" style="color: #fff">登录</router-link>
          <b>&nbsp;|&nbsp;</b>
          <router-link to="/register" style="color: #fff">注册</router-link>
        </div>
      </div>
    </div>
    <div class="my-nav">
      <div class="nav-container">
        <router-link to="/"
          ><img class="logo" src="../assets/img/bydlogo.png" alt="" srcset=""
        /></router-link>

        <div class="nav-r">
         
          <router-link 
            v-for="(item,i) in navList" :key="i"
            :to="item.path" 
            custom v-slot="{navigate, isActive}">
            <div @click="navigate" :class="isActive?'active':'' ">{{item.name}}</div>

          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar",
  components: {},
  props: {},
  data() {
    return {      
      // now: 0,
      navList: [
        {name:'首页',path:'/index'},
        { name: "在线订车", path: "/zxdc" },
        { name: "预约试驾", path: "/yysj" },
        { name: "网点查询", path: "/wdcx" },
        { name: "联系我们", path: "/lxwm" },
      ],
    };
  },
  methods: {
   
  },
};
</script>

<style>
.my-header {
  width: 100vw;
  height: 48px;
  background-color: #0d9ca9;
  display: flex;
  justify-content: center;
}
.header-container {
  width: 1400px;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.hl {
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* border: 1px solid red; */
}
.hl > img {
  width: 25px;
  height: 25px;
  padding-right: 10px;
}
.hr {
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* border: 1px solid red; */
}
.my-nav {
  width: 100vw;
  height: 100px;
  background-color: rgba(28, 67, 94, 0.7);
  display: flex;
  justify-content: center;
}
.nav-container {
  width: 1400px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 213px;
  height: 41px;
  display: flex;
  justify-content: flex-start;
  /* border: 1px solid red; */
}
.nav-r {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* border: 1px solid red; */
}
.nav-r div {
  font-size: 24px;
  color: #fff;
  padding: 34px 40px;
  transition: 0.5s;
  user-select: none;
  /* border: 1px solid red; */
}
.nav-r div.active {
  background-color: #0d9ca9;

  transform: skew(-20deg);
}
.nav-r div:hover {
  background-color: #0d9ca9;
  transform: skew(-20deg);
}

.menu-item a {
  color: #fff;
}
</style>